@tailwind base;
@tailwind components;
@tailwind utilities;

::-webkit-scrollbar {
    width: 0.35rem;
    background-color: #b3b2b1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    width: 0.5rem;
    background-color: #db2d2e;
    border-radius: 10px;
}

@layer components {
    section {
        @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-12 min-h-screen;
    }
}

.TextShadow:hover {
    text-shadow: 0 0 20px #eeb844,0 0 20px #eeb844,0 0 20px #eeb844;
}

@layer base {
    body {
        @apply leading-relaxed;
    }
    .page {
        @apply w-full h-screen
    }
    .h1 {
        @apply text-[35px] leading-tight md:text-[60px] md:leading-[1.3] mb-8 font-semibold;
    }
    .h2 {
        @apply text-[35px] leading-tight md:text-[54px] md:leading-[1.3] mb-4 font-semibold;
    }
    p {
        @apply leading-[1.8] text-white/60 font-light;
    }
    .btn,
    .input {
        @apply h-[50px]
    }
    .input {
        @apply w-full h-[50px] rounded-lg pl-6 capitalize;
    }
    .input,
    .textarea {
        @apply bg-transparent outline-none border border-black/20 placeholder:text-black/60 placeholder:font-light;
    }
    .textarea {
        @apply w-full h-[180px] p-6 capitalize rounded-lg resize-none;
    }
}
